

<!--link rel="stylesheet" href="../static/css/jquery-ui-1.10.3.custom.css" type="text/css" media="screen, projection"/-->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css"
	type="text/css" media="screen" />

<!-- Optional theme -->
<link rel="stylesheet"
	href="../static/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/css/style.css">

<script
	src="{{url_for('static', filename='../static/bootstrap/js/bootstrap.min.js')}}"
	type="text/javascript" charset="utf-8"></script>
<script
	src="{{url_for('static', filename='../static/js/jquery-1.9.1.js')}}"
	type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        
        reader.onload = function (e) {
            $('#image-preview').attr('src', e.target.result);
        }
        
        reader.readAsDataURL(input.files[0]);
    }
}

$("#image-input").change(function(){
    readURL(this);
});

$("#image-del-btn").click(function(){
	$("#image-input").files=null;
	$('#image-preview').attr('src', '../static/images/0001/live.jpg');
});

});
</script>

<div class="container">
	<!-- 
		<form enctype="multipart/form-data" class="form-add-picture col-md-6" action="/add_picture" method="post">
			<h1>Post your product or service</h1>
		  	<div class="row form-group">
		  		<div class="col-md-6">
					<input class="form-control" id="picture-name" type="text" name="picture-name" placeholder="Item name"/>
				</div>
								
		  		<div class="col-md-5">Enter product or service name</div>
		  	</div>
		  	
		  	
		  	<div class="row form-group">
		    	<div class="col-md-6">
					<select class="form-control col-md-6" id="picture-type" type="picture-type" name="picture-type" placeholder="Item type">
					  <option value="Item">Item</option>
					  <option value="Service">Service</option>
					</select>
					
				</div>
			  	<div class="col-md-5">Item type</div>
			</div>
		  	
		  	<div class="row form-group">
		  		<div class="col-md-6">
					<input class="form-control" id="picture-description" type="text" name="picture-description" placeholder="Description"/>
				</div>
								
		  		<div class="col-md-5">Enter your description</div>
		  	</div>
		  	
		  	<div class="row form-group">
		  		<div class="col-md-6">
					<input class="form-control" id="price" type="text" name="price" placeholder="Price"/>
				</div>
			  	<div class="col-md-5">Enter the price per picture</div>
		  	</div>
			
		  	<div class="row form-group">
		  		<div class="col-md-6">
					<input class="form-control" id="quantity" type="text" name="quantity" placeholder="Quantity"/>
				</div>
			  	<div class="col-md-5">Enter the quantity you have</div>
		  	</div>
		  	
		  	<div class="row form-group">
		    	<div class="col-md-6">
					<div class="form-control col-md-6 thumbnail" id="picture-picture" name="picture-picture">
						<img id="image-preview" alt="300x200" style="width: 300px; height: 200px; />
						
						<div class="caption">
							<p>
								<span class="btn btn-primary btn-file">Browse<input id="image-input" name="picture-image" type="file" ></span>
								<a id="image-del-btn" class="btn btn-primary">Delete</a>
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-5">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</div>
			</div>
		  	
		  	
		  	<div class="row">
			  	<div class="col-md-6">
				  	<label class="checkbox">
				  		<input type="checkbox" value="remeber-me">Show to everyone
				  	</label>
			  	</div>
			</div>
			
			
			<div class="row">
			  	<div class="col-md-6">
				  	<button type="submit" name="add-picture" value="add-picture" class="submit btn btn-primary col-md-6">Add picture</button>
			  	</div>
			</div>
			
		</form>
		 -->
	<div class="col-md-6">
		<div class="panel panel-default">
			<form id="pictures-form" action="/manage_pictures" method="post">
				<div class="panel-heading">Pictures</div>
				<div class="panel-body">
					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
						Donec id elit non mi porta gravida at eget metus.</p>
					<div class="col-md-6 col-md-offset-6">
						<a class="btn btn-primary col-md-5">Edit</a> <a
							class="btn btn-primary col-md-5 col-md-offset-1 submit">Delete</a>
					</div>
				</div>

				<table id="pictures-table" class="table">
					<tr>
						<td><input type="checkbox"></td>
						<th>Name</th>
						<th>Description</th>
						<th>Path</th>
						<th>Type</th>
						<th>Item</th>
					</tr>
					{% if pictures != None %} {% for picture in pictures %}
					<tr>
						<td><input type="checkbox" name="select-picture"
							value="{{ picture.id }}"></td>
						<td>{{picture['name']}}</td>
						<td>{{picture['description']}}</td>
						<td>{{picture['path']}}</td>
						<td>{{picture['type']}}</td>
					</tr>
					{% endfor %} {% endif %}
				</table>

			</form>
		</div>
	</div>
</div>